<template>
  <div class="examination-page s1">
    <div class="id">-{{data.name||data.class_name}}<span></span>-</div>
    <div class="info">
      <div class="subject">{{data.subject}}</div>
      <div class="remain">{{timeMsg}}</div>
      <div class="time">(时间 {{hhmm(data.begin_time)}} - {{hhmm(data.end_time)}})</div>
      <div class="invigilator">
        <div class="fl">监考老师：</div>
        <div class="of">{{data.invigilators}}</div>
      </div>
      <ul class="remind">
        <li v-if="data.currMsg"><span>★</span>{{currMsg}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import TimeUpdate from '@/modules/corejs/time/time-update'

  export default {
    name: 'temp1exam',
    props: ['bus'],
    data: function () {
      return {
        begin_time: '',
        timeMsg: '',
        currMsg: '',
        testTime: '',
        data: {
          'exam_id': '',
          'class_id': '',
          'name': '',
          'class_name': '',
          'subject': '',
          'begin_time': '',
          'end_time': '',
          'invigilators': '',
          'message': []
        }
      }
    },
    created () {
      this.timeUpdate = new TimeUpdate()
      this.update()
    },
    destroyed () {
      this.timeUpdate.stop()
    },
    beforeRouteUpdate (to, from, next) {
      next()
      this.update()
    },
    methods: {
      update () {
        let {equipmentCode} = this.bus
        if (!equipmentCode) return
        axios.get('/ajax/GetExamNoticeByEquipmentCode?equipmentCode=' + equipmentCode).then(({data: d}) => {
          if (!d || !d.data) return

          d.data.message.sort(function (v1, v2) {
            if (v1.minute < v2.minute) return -1
            if (v1.minute > v2.minute) return 1
            return 0// 不处理
          })

          if (d.data.message[0].minute > 0) {
            d.data.message.unshift({
              'minute': 0,
              'message': ''
            })
          }

          this.begin_time = new Date(d.data.begin_time)
          this.testTime = (new Date(d.data.end_time) - this.begin_time) / 1000 / 60
          this.data = d.data

          this.timeUpdate.start(this.minuteUpdate, 1000 * 60)
        })
      },
      hhmm (time) {
        if (time) {
          return time.match(/\d+:\d+/)[0]
        }

        return ''
      },
      minuteUpdate () {
        let date = new Date()
        let nowTime = date.getTime()
        let beginTime = this.begin_time.getTime()
        let minute = Math.ceil((beginTime - nowTime) / 1000 / 60)

        this.data.message.every(function (d, i, arr) {
          if (minute <= d.minute) {
            arr.splice(i, 1)

            this.currMsg = d.message

            // 干掉后面的
            for (var j = i, len = arr.length; j < len; j++) {
              arr.splice(i, 1)
            }

            return false
          }

          return true
        })

        if (minute <= -this.testTime) {
          this.timeMsg = '考试结束'
        } else if (minute <= 0) {
          this.timeMsg = '考试进行中'
        } else if (minute > 0) {
          this.timeMsg = minute + '分钟后开考'
        }
      }
    }
  }
</script>

<style>
  .examination-page.s1 {
    width: 1080px;
    height: 1920px;
    background: #00c6f8 url("imgs/kc-bg1.png") no-repeat;
    background-size: 100% auto;
  }

  .examination-page.s1 .id {
    -webkit-text-stroke: 5px rgba(255, 255, 255, 0.9);
    text-stroke: 5px rgba(255, 255, 255, 0.8);
    font-size: 110px;
    text-align: center;
    color: #093a46;
    font-weight: bold;
    padding: 190px 0 64px;
  }

  .examination-page.s1 .id span {
    color: #f26a6a;
  }

  .examination-page.s1 .info {
    width: 936px;
    height: 1160px;
    position: relative;
    margin: 96px auto 115px;
    text-align: center;
  }

  .examination-page.s1 .info .subject {
    font-size: 220px;
    -webkit-text-stroke: 10px #fff;
    text-stroke: 10px #fff;
    font-weight: bold;
    color: #00303c;
    padding: 80px 0 26px;
  }

  .examination-page.s1 .info .remain {
    font-size: 70px;
    color: #f85a5a;
  }

  .examination-page.s1 .info .time {
    font-size: 38px;
    color: #f85a5a;
    padding: 36px 0;
  }

  .examination-page.s1 .info .invigilator {
    font-size: 40px;
    width: 500px;
    margin: 0 auto;
    line-height: 2;
  }

  .examination-page.s1 .info .invigilator .fl {
    float: left;
  }

  .examination-page.s1 .info .invigilator .of {
    overflow: hidden;
  }

  .examination-page.s1 .info .remind {
    width: 50%;
    text-align: left;
    font-size: 30px;
    color: #002f3a;
    position: absolute;
    bottom: 100px;
    right: 0;
  }

  .examination-page.s1 .info .remind li {
    padding: 8px 0;
  }

  .examination-page.s1 .info .remind span {
    -webkit-text-stroke-width: 5px;
    padding-right: 14px;
    color: #ffa912;
  }
</style>
